<template>
  <el-tooltip v-if="tip && tip.length">
    <div slot="content">
      <span v-html="tip" />
    </div>
    <el-button
      v-if="text && text.length"
      ref="ref-el-button"
      v-bind="props"
      v-on="events"
    >
      {{ text }}
    </el-button>
    <el-button
      v-else
      ref="ref-el-button"
      v-bind="props"
      class="text-empty"
      v-on="events"
    />
  </el-tooltip>
  <el-button
    v-else-if="text && text.length"
    ref="ref-el-button"
    v-bind="props"
    v-on="events"
  >
    {{ text }}
  </el-button>
  <el-button
    v-else
    ref="ref-el-button"
    v-bind="props"
    class="text-empty"
    v-on="events"
  />
</template>

<script lang="ts">
/*
prop 列表
  CM: ComponentModel  组件模型
CM.meta 扩展
  tip: string 为按钮添加提示信息
ref 列表
  ref-el-button [默认]
*/
import { Component, Prop } from 'vue-property-decorator'
import TgComponent from '../TgComponent'
import { ComponentModel } from '@TG/interface'
import { isNotEmpty } from '@TG/kit/validate'

@Component({
  name: 'ElButtonPackage'
})
export default class extends TgComponent {
  @Prop({ type: Object, required: true }) private CM!: ComponentModel

  get text() {
    return this.CM.text
  }

  get tip() {
    return this.CM.meta?.tip || ''
  }

  get props() {
    const plain = (this.CM.props?.type !== 'text')
    return Object.assign({ plain }, this.CM.props, this.$attrs)
  }

  get events() {
    return Object.assign({}, this.CM.events, this.$listeners)
  }

  public defaultRef() {
    return 'el-button'
  }
}
</script>

<style lang="scss" scoped>
.text-empty {
  padding: 10px;
  .el-button--medium {
    padding: 10px;
  }
}
</style>
